<template>
    <div class="content-column third-column">
        <div class="column-panel ">
            <div class="panel-title">临期专项</div>
            <div class="chart-container" ref="chartRef"></div>
            <div class="panel-foot"></div>
        </div>
        <div class="column-panel ">
            <div class="panel-title">今日计划</div>
            <div ref="planScrollContainer" class="panel-content scroll-container" @mouseenter="stopPlanScroll"
                @mouseleave="startPlanScroll" @wheel.prevent="handlePlanWheel">
                <div ref="planScrollContent" class="scroll-content">
                    <table class="scroll-table">
                        <tbody>
                            <tr v-for="(item, index) in todayPlans" :key="index">
                                <td>{{ item.station }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.status }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel-foot"></div>
        </div>
        <div class="column-panel ">
            <div class="panel-title">重点问题</div>
            <div ref="issueScrollContainer" class="panel-content scroll-container" @mouseenter="stopIssueScroll"
                @mouseleave="startIssueScroll" @wheel.prevent="handleIssueWheel">
                <div ref="issueScrollContent" class="scroll-content">
                    <table class="scroll-table">
                        <tbody>
                            <tr v-for="(item, index) in keyIssues" :key="index">
                                <td>{{ item.description }}</td>
                                <td>{{ item.status }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel-foot"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    data: {
        type: Object,
        required: true
    }
});
const chartRef = ref(null);
let chartInstance = null;
const planScrollContainer = ref(null);
const planScrollContent = ref(null);
let planScrollInterval = null;
let planScrollTop = 0;
let isPlanScrolling = false;
const issueScrollContainer = ref(null);
const issueScrollContent = ref(null);
let issueScrollInterval = null;
let issueScrollTop = 0;
let isIssueScrolling = false;
const getNearData = () => {
    let nearData = []
    props.data.planNearList.map(item => {
        const completed = item.taskNearList.filter(item => item.status == "2")[0]?.number;
        const pending = item.taskNearList.filter(item => item.status == "1")[0]?.number;
        nearData.push({
            name: item.name,
            completed: completed,
            pending: pending
        })
    })
    return nearData
}
const todayPlans = ref([
    { "station": "官浔站 ", "name": "气压表排查专项", "status": "未开始" },
    { "station": "角美站 ", "name": "设备房检查专项", "status": "未开始" },
    { "station": "丙洲站 ", "name": "电缆路径收集", "status": "进行中" },
    { "station": "厦门北站", "name": " 蓄电池充放电试验", "status": "待验收" },
    { "station": "后溪站 ", "name": "设备房渗漏水排查", "status": "未开始" },
    { "station": "洞庭站 ", "name": "400V螺栓紧固专项", "status": "进行中" },
    { "station": "林埭西站 ", "name": "有限空间排查", "status": "进行中" }
]);
const keyIssues = ref([
    { "description": "官浔站 控制室墙壁渗水", "status": "处理中" },
    { "description": "丙洲站 设备房温度过高", "status": "已解决" },
    { "description": "厦门北站 直流设备异响", "status": "待处理" },
    { "description": "洞庭站 框架绝缘异常", "status": "处理中" },
    { "description": "后溪站 蓄电池容量不足", "status": "已上报" },
    { "description": "洪坑站站 电缆接头过热", "status": "紧急处理" },
    { "description": "翔安机场站 柜门卡滞", "status": "已解决" },
    { "description": "后溪车辆段 光纤信号弱", "status": "待处理" }
]);
onMounted(() => {
    initChart();
    if (planScrollContainer.value && planScrollContent.value) {
        startPlanScroll();
    }
    if (issueScrollContainer.value && issueScrollContent.value) {
        startIssueScroll();
    }
});
const initChart = () => {
    if (chartRef.value) {
        if (chartInstance) {
            chartInstance.dispose();
        }
        chartInstance = echarts.init(chartRef.value);
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    const name = params[0].name;
                    const completed = params[0].value;
                    const pending = params[1].value;
                    const total = completed + pending;
                    return `${name}<br/>已完成: ${completed}<br/>未完成: ${pending}<br/>总数: ${total}`;
                }
            },
            legend: {
                data: ['已完成', '未完成'],
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                top: 0
            },
            grid: {
                top: '15%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                minInterval: 1
            },
            yAxis: {
                type: 'category',
                data: getNearData().map(item => item.name),
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                }
            },
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    data: getNearData().map(item => item.completed),
                    itemStyle: {
                        color: '#02a6b5'
                    }
                },
                {
                    name: '未完成',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    data: getNearData().map(item => item.pending),
                    itemStyle: {
                        color: 'rgba(255, 153, 0, 0.8)'
                    }
                }
            ]
        };
        chartInstance.setOption(option);
        window.addEventListener('resize', handleResize);
    }
};
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
const startPlanScroll = () => {
    if (!isPlanScrolling) {
        isPlanScrolling = true;
        planScrollInterval = setInterval(() => {
            const contentHeight = planScrollContent.value.offsetHeight;
            const containerHeight = planScrollContainer.value.offsetHeight;
            const maxScrollTop = Math.max(0, contentHeight - containerHeight);
            if (contentHeight <= containerHeight) {
                clearInterval(planScrollInterval);
                return;
            }
            planScrollTop += 1;
            if (planScrollTop >= maxScrollTop) {
                planScrollTop = 0;
                planScrollContent.value.style.transition = 'none';
                planScrollContent.value.style.transform = `translateY(0)`;
                setTimeout(() => {
                    planScrollContent.value.style.transition = 'transform 0.1s linear';
                }, 50);
            }
            planScrollContent.value.style.transform = `translateY(-${planScrollTop}px)`;
        }, 50);
    }
};
const stopPlanScroll = () => {
    if (isPlanScrolling) {
        isPlanScrolling = false;
        clearInterval(planScrollInterval);
    }
};
const handlePlanWheel = (e) => {
    stopPlanScroll();
    const contentHeight = planScrollContent.value.offsetHeight;
    const containerHeight = planScrollContainer.value.offsetHeight;
    const maxScrollTop = Math.max(0, contentHeight - containerHeight);
    const scrollStep = e.deltaY > 0 ? 20 : -20;
    planScrollTop = Math.max(0, Math.min(maxScrollTop, planScrollTop + scrollStep));
    planScrollContent.value.style.transform = `translateY(-${planScrollTop}px)`;
};
const startIssueScroll = () => {
    if (!isIssueScrolling) {
        isIssueScrolling = true;
        issueScrollInterval = setInterval(() => {
            const contentHeight = issueScrollContent.value.offsetHeight;
            const containerHeight = issueScrollContainer.value.offsetHeight;
            const maxScrollTop = Math.max(0, contentHeight - containerHeight);
            if (contentHeight <= containerHeight) {
                clearInterval(issueScrollInterval);
                return;
            }
            issueScrollTop += 1;
            if (issueScrollTop >= maxScrollTop) {
                issueScrollTop = 0;
                issueScrollContent.value.style.transition = 'none';
                issueScrollContent.value.style.transform = `translateY(0)`;
                setTimeout(() => {
                    issueScrollContent.value.style.transition = 'transform 0.1s linear';
                }, 50);
            }
            issueScrollContent.value.style.transform = `translateY(-${issueScrollTop}px)`;
        }, 50);
    }
};
const stopIssueScroll = () => {
    if (isIssueScrolling) {
        isIssueScrolling = false;
        clearInterval(issueScrollInterval);
    }
};
const handleIssueWheel = (e) => {
    stopIssueScroll();
    const contentHeight = issueScrollContent.value.offsetHeight;
    const containerHeight = issueScrollContainer.value.offsetHeight;
    const maxScrollTop = Math.max(0, contentHeight - containerHeight);
    const scrollStep = e.deltaY > 0 ? 20 : -20;
    issueScrollTop = Math.max(0, Math.min(maxScrollTop, issueScrollTop + scrollStep));
    issueScrollContent.value.style.transform = `translateY(-${issueScrollTop}px)`;
};
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(planScrollInterval);
    clearInterval(issueScrollInterval);
});
</script>
<style scoped>
.content-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 15px;
}

.third-column {
    flex: 1;
}

.column-panel {
    background-color: rgba(10, 30, 60, 0.2);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-image: url('/dashboard/images/line.png');
    position: relative;
    border: 1px solid rgba(204, 204, 204, 0.3);
    min-height: 250px;
}

.column-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.column-panel .panel-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.column-panel .panel-foot::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
}

.column-panel .panel-foot::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}

.panel-title {
    font-size: 1rem;
    padding: 0 0 4px 0;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
    color: white;
}

.panel-content {
    color: #fff;
    padding: 5px 0;
    flex: 1;
    overflow: hidden;
}

.chart-container {
    width: 100%;
    height: 200px;
    margin: 10px 0;
    flex-shrink: 0;
}

.scroll-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.1s linear;
    will-change: transform;
}

.scroll-table {
    width: 100%;
    border-collapse: collapse;
}

.scroll-table th,
.scroll-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(204, 204, 204, 0.3);
}

.scroll-table th {
    background-color: rgba(10, 30, 60, 0.3);
}

.scroll-table tr:nth-child(even) {
    background-color: rgba(10, 30, 60, 0.2);
}

@media (max-width: 768px) {
    .third-column {
        width: 100%;
        height: auto;
    }

    .panel-title {
        font-size: 1rem;
    }

    .chart-container {
        height: 180px;
    }
}
</style>